<template>
  <div class="h-full w-full" id="gchart"></div>
</template>
<script setup>
import echarts from '../utils/echarts';
import { ref, onMounted, watch } from 'vue';
onMounted(() => {
  createChart();
});
let degree = 0;
const props = defineProps(['degree']);

watch(
  () => props.degree,
  (e) => {
    degree = e;
    renderChart();
  },
);

let gaugeChart = '';
function createChart() {
  gaugeChart = echarts.init(document.getElementById('gchart'));
}
function renderChart() {
  const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    {
      offset: 0,
      color: '#16a34a',
    },
    {
      offset: 1,
      color: '#ef4444',
    },
  ]);
  // colorSet倒过来
  const colorSet = [
    [0, '#ef4444'],
    [1, color],
  ];
  let option = {
    series: [
      {
        type: 'gauge',
        radius: 77,
        center: ['50%', '90%'],
        startAngle: 0,
        endAngle: 180,
        min: 100, // min和max倒过来
        max: 0,
        splitNumber: 10,
        clockwise: false, // 设置数据逆时针增长
        itemStyle: {
          color: '#fef2f2', // 用于替代背景色的颜色
          borderColor: '#fef2f2', // 用跟上面一样的颜色遮住露出的背景色
        },
        progress: {
          show: true,
          roundCap: false, // 只适用于平角
          width: 8,
        },
        emphasis: {
          // 禁用高亮（从v5.3.0开始支持）低版本可以通过设置color为'inherit'或与普通状态相同颜色实现
          disabled: true,
        },
        pointer: {
          show: false, // 隐藏指针
        },
        axisLine: {
          roundCap: false, // 只适用于平角
          lineStyle: {
            width: 8,
            color: colorSet, // 渐变色作为轴的背景色
          },
        },
        axisTick: {
          splitNumber: 1,
          length: 2,
          distance: 3,
          lineStyle: {
            width: 1,
            color: '#999',
          },
        },
        splitLine: {
          show: false,
          length: 5,
          // distance:5,
          lineStyle: {
            width: 1,
            color: '#999',
            roundCap: false,
          },
        },
        axisLabel: {
          distance: 5,
          color: '#999',
          fontSize: 8,
        },
        title: {
          offsetCenter: [0, '-5%'],
          fontSize: 12,
        },
        detail: {
          valueAnimation: true,
          offsetCenter: [0, '-35%'],
          rich: {
            r: {
              color: '#ef4444',
              fontSize: 16,
              fontWeight: 'bold',
            },
            g: {
              color: '#16a34a',
              fontSize: 16,
              fontWeight: 'bold',
            },
          },
          formatter: function (value) {
            if (value > 45) {
              return '{r|' + value + '°C}';
            } else {
              return '{g|' + value + '°C}';
            }
          },
        },
        data: [
          {
            value: degree,
            name: '市场热度',
          },
        ],
      },
    ],
  };
  gaugeChart.setOption(option);
}
</script>
